<template>
	<view class="container" :class="configs.beginning != 'user'?'container1':''">
		<scroll-view class="scrollView" scroll-y="true" @scroll="scroll.scrollSun" :scroll-y="true" :scroll-with-animation="true" :scroll-into-view="scroll.clickToId">
			<!-- 顶部锚点 tab -->
			<view class="comment" :style="{ opacity: scroll.opacity }">
				<view v-for="(item,index) in scroll.tabs" :key="item" :class="scroll.navIndex==index?'active':''" @tap="scroll.tabChange1(index)">{{item}} <text></text></view>
			</view>
			<view id="p1">
				<view class="header" >
					<video v-if="goodsInfo.swiperIsVideo" :src="goodsInfo.data.mainImageVideo"></video>
					<swiper :current="goodsInfo.current" v-else @change="goodsInfo.swiperChange" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="(item,index) in goodsInfo.data.goodsPicturesList" :key="item" >
							<image :src="item" mode=""></image>
						</swiper-item>
					</swiper>
					<view class="dian" v-if="!goodsInfo.swiperIsVideo"><view :class="goodsInfo.current==index?'active':''" v-for="(item,index) in goodsInfo.data.goodsPicturesList" :key="index"></view></view>
					<view class="changeVideo" v-if="goodsInfo.data.mainImageVideo"><view :class="goodsInfo.swiperIsVideo?'active':''" @tap="goodsInfo.swiperIsVideo=true">视频</view><view :class="!goodsInfo.swiperIsVideo?'active':''" @tap="goodsInfo.swiperIsVideo=false">图片</view></view>
				</view>
				<view class="main">
					<view class="detail">
						<view class="priceStatus">
							<view class="price">¥<text>{{goodsInfo.priceMoney}}</text></view>
							<!-- v-if="(goodsInfo.status == 0 && goodsInfo.saleType != 0) || goodsInfo.goodsStatus == 3 || goodsInfo.goodsStatus == 4 || !preSale" -->
							<view class="status" v-if="(goodsInfo.status == 0 && goodsInfo.data.saleType != 0) || goodsInfo.goodsStatus == 3 || goodsInfo.goodsStatus == 4 || !goodsInfo.preSale">
								{{ goodsInfo.status == 0 && goodsInfo.data.saleType != 0 ? "即将开售" : "预售" }}
							</view>
						</view>
						<view class="detail_content">
							<view class="detail_content_top">
								<view class="name">{{goodsInfo.data.name}}</view>
							    <view class="share" @tap="goodsInfo.toShare">
							    	<text></text><view><image :src="url+'icon-88.png'" mode=""></image><text>分享</text></view>
							    </view>
							</view>
							<view class="label">{{goodsInfo.data.description}}</view>
						</view>
					</view>
					<view class="configuration view" @tap="beginning?goodsInfo.toUserShop():goodsInfo.btnCartMessage(3)">
						<view class="item select">
							<view class="label">已选</view>
							<view class="value">
								<view class="item_content">
									<view class="item_content_title">
										{{goodsInfo.data.goodsSkuStockList && goodsInfo.data.ifSkus == 1?goodsInfo.selectShopStr:'默认规格'}}
									</view>
									<view class="select_scroll" v-if="goodsInfo.data.goodsSkuStockList&&goodsInfo.data.goodsSkuStockList.length!=0">
										<scroll-view scroll-x="true" class="scroll-x">
											<view class="select_label xjs-line-one" :class="goodsInfo.selectShop.id == item.id?'active':''"  v-for="item in goodsInfo.data.goodsSkuStockList" :key="item.id">{{item.propertiesArrStr}}</view>
										</scroll-view>
										<view class="total"><text>共{{goodsInfo.data.goodsSkuStockList.length}}个</text><text>规格可选</text></view>
									</view>
								</view>
								<uni-icons type="right" :color="'#707272'" :size="16"></uni-icons>
							</view>
						</view>
						<view class="item">
							<view class="label">配送</view>
							<view class="value" @tap="address.selectAddress">
								<view class="item_content">
									<view class="item_content_title">{{ address.data.province }}{{ "-" + address.data.city}}{{ address.data.area ? "-" + address.data.area : "" }}</view>
									<view class="address">
										{{common.getPresalesDelivery()}}
										<text class="block" v-if="address.logistics.delayShipment == 1">{{ address.data.province }}地区，延期原因：{{ address.logistics.delayReason }}</text>
									</view>
								</view>
								<uni-icons type="right" :color="'#707272'" :size="16"></uni-icons>
							</view>
						</view>
						<view class="item" v-if="address.expressDetail">
							<view class="label">运费</view>
							<view class="value">
								<view class="item_content">
									<view class="item_content_title">
										{{ address.expressDetail.freeType == 1 ? `满${address.expressDetail.freeMoney}元包邮` : address.expressDetail.freeType == 0 ? `满${address.expressDetail.freeAmount}件包邮` : "" }}
										<text
											v-if="!(address.expressDetail.freeMoney && address.expressDetail.freeType != null)"
											:class="address.expressDetail.freeMoney && address.expressDetail.freeType != null ? 'moneyNo' : ''">
											{{ address.expressDetail.freight ? "¥" + address.expressDetail.freight : "" }}
										</text>
									</view>
									<view class="shippingFee" v-if="address.logistics.delayShipment == 1">{{ address.province }}地区，延期原因：{{ address.logistics.delayReason }}</view>
								</view>
								<!-- <uni-icons type="right" :color="'#707272'" :size="16"></uni-icons> -->
							</view>
						</view>
					</view>
					<view class="activity view" v-if="goodsInfo.data.purchaseUserLevelsStr || goodsInfo.data.purchaseLimitType != 0">
						<view class="label">活动</view>
						<view class="value">
							<view class="activity_item" v-if="goodsInfo.data.purchaseUserLevelsStr">
								<view class="item_content">
									<view>专享</view><text>仅限{{goodsInfo.data.purchaseUserLevelsStr}}购买</text>
								</view>
								<!-- <uni-icons type="right" :color="'#707272'" :size="16"></uni-icons> -->
							</view>
							<view class="activity_item last" v-if="goodsInfo.data.purchaseLimitType != 0">
								<view class="item_content">
									<view>限购</view><text>{{ goodsInfo.purchaseLimit.day }}限购{{ goodsInfo.purchaseLimit.num }}件{{goodsInfo.purchaseLimit.num > goodsInfo.data.alreadyBuyNum?goodsInfo.data.alreadyBuyNum&&goodsInfo.data.alreadyBuyNum!=null?`(已购${goodsInfo.data.alreadyBuyNum}件)`:'':'(已达限购上限)'}}</text>
								</view>
								<!-- <uni-icons type="right" :color="'#707272'" :size="16"></uni-icons> -->
							</view>
						</view>
					</view>
					<view class="shop view" @tap="goodsInfo.toShop">
						<image :src="goodsInfo.data.brandsLogo" mode=""></image>
						<view class="shop_centent">
							<view class="name">
								<view class="brandsName">{{goodsInfo.data.brandsName}}</view>
								<view>进入店铺 <uni-icons type="right" :color="'#707272'" :size="16"></uni-icons></view>
							</view>
							<view class="jianjie xjs-line-one">{{goodsInfo.data.brandsRemark}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="detail_content" id="p2">
				<view class="detail_content_title">商品详情</view>
				<view class="mainInfo-area">
					<mp-html :content="goodsInfo.detailRichText" />
				</view>
			</view>
			<view class="recommend" id="p3">
				<view class="recommend_title">为您推荐</view>
				<shopList :isLine="false" :list="recommend.list"></shopList>
			</view>
		</scroll-view>
        <view class="footer footerProd"  v-if="beginning">
        	<view class="fenYong">
        		<view v-if="userInfo.identity==1">工作室可赚佣金：{{goodsInfo.selectShop.studioPromotionCommission}}元</view>
        		<view>推广员可赚佣金：{{goodsInfo.selectShop.petsitterPromotionCommission}}元</view>
        	</view>
        	<view class="toShare">
        		<view class="to" @tap="goodsInfo.onlineMall"><image :src="url+'icon-181.png'"></image><text>商城</text></view>
        		<view class="share" @tap="goodsInfo.toUserShop">我要下单</view>
        	</view>
        </view>
        <view class="footer" v-else>
        	<view class="toUrl" >
        		<view @tap="goodsInfo.onlineMall"><image :src="url+'icon-181.png'"></image><text>商城</text></view>
        		<view @tap="goodsInfo.toCar"><image :src="url+'icon-182.png'"></image><text>购物车</text></view>
        	</view>
        	<view class="toBtn" :class="goodsInfo.purchaseNo?'':'purchaseNo'"><view @tap="goodsInfo.btnCartMessage(1)">加入购物车</view><view @tap="goodsInfo.btnCartMessage(2)">立即购买</view></view>
        </view>
		<!-- 即将开售 -->
		<view class="tipsFooter" v-if="goodsInfo.status == 0 && goodsInfo.saleTime&&beginning==false">即将开售，开售时间：{{ goodsInfo.data.saleTime }}</view>
		<!-- 已抢光 -->
		<view class="tipsFooter" @tap="recommend.openRecommendModel" v-if="(goodsInfo.goodsStatus==2 || goodsInfo.goodsStatus==3)&&beginning==false">
			商品已抢光啦，瞧瞧别的商品去<uni-icons type="right" :color="'#5C5E5E'" :size="16"></uni-icons></view>
		<!-- 限购 -->
		<view class="tipsFooter"v-if="beginning==false&&goodsInfo.status != 2 &&goodsInfo.data.isBuy &&goodsInfo.condition != 0 &&goodsInfo.status != 0 &&goodsInfo.goodsStatus != 3 &&(goodsInfo.data.saleType != 1 || goodsInfo.goodsStatus != 2)">{{ goodsInfo.condition == 1 ? "暂不符合购买条件" : "您的已购已达购买限购件数，暂无法继续购买" }}</view>
		
		<!-- 导航更多弹框 -->
		<view class="navModel" v-if="model.navModel" @tap="model.navModel=false">
			<view class="content" @tap.stop>
				<view class="content_item" v-for="(item,index) in model.navList" :key="item.id" @tap="goodsInfo.toUrl(index)">
					<image :src="item.img"></image>
					<view>{{item.name}}</view>
				</view>
				<view class="content_item" @tap="goodsInfo.toShare">
					<image :src="url+'icon-88.png'"></image>
					<view>分享商品</view>
				</view>
			</view>
		</view>
		<!-- 商品身份购买弹框 -->
		<purchase ref="skuPopup" :cartMessage="goodsInfo.cartMessage" :showPop="goodsInfo.showPop" @selectShop="goodsInfo.getSelectShop" @open="goodsInfo.onOpenSkuPopup" />
		<!-- 推荐列表 -->
		<uni-popup ref="recommendModel" type="dialog" safe-area background-color="#fff">
			<view class="conditionDialogpopup">
				<view class="selectlandnotice">
					<view>晚了一步，商品已经{{ goodsInfo.status == 2 ? "下架" : "抢光" }}啦，不如看看别的吧</view>
					<uni-icons type="closeempty" @tap="recommend.closerecommendModel" :color="'#1b2120'" :size="14"></uni-icons>
				</view>
				<view class="shopClass_list" v-if="recommend.sellOutList.length != 0">
					<scroll-view :scroll-top="0" scroll-x="true" class="scroll-x">
						<view class="shopClass_list_item" v-for="(item, index) in recommend.sellOutList" :key="index" @click="recommend.btnDetail(item.id)">
							<image :src="item.thumPic" mode=""></image>
							<view class="h5 xjs-line-one">{{ item.name }}</view>
							<view class="shopClass_list_item_money">¥ {{item.price}}</view>
						</view>
					</scroll-view>
					<view class="seeMore" @tap="goodsInfo.toShop">
						<text>查看更多</text>
						<uni-icons type="right" :color="'#707272'" :size="14"></uni-icons>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
import {ref,reactive,nextTick} from 'vue'
import {onLoad,onShow} from '@dcloudio/uni-app'
import api from '@/api'
import { dealHtml,formatTime } from '@/hooks/useFunction'
import { useOrderStoreToRefs } from "@/store/useOrderStore"
import { useUserStoreToRefs } from '@/store/useUserStore'
const { userInfo } = useUserStoreToRefs()
const { addressInfo } = useOrderStoreToRefs()
const url = ref<string>('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')
import purchase from './components/purchase.vue'
import configs from '@/config';
onLoad((e)=>{
	goodsInfo.goodsId = e.goodsId
	beginning.value = configs.beginning == 'user'?false:true 
})
const skuPopup = ref(null)
const recommendModel = ref(null)
onShow(async()=>{
	init()
})
//初始化，掉接口
const init = async()=>{
	uni.showLoading({
		mask: true,
		title: "加载中"
	})
	address.isGetAddress = true;
	scroll.tabs =  ['概况']
	goodsInfo.preSale = true; //默认现货 false  预售
	goodsInfo.sku = []; //sku默认展示的规格
	goodsInfo.saleTime = ""; //定时器
	goodsInfo.condition = 0; //判断限购 0 可以购买  1 身份限购  2 数量限购
	goodsInfo.purchaseNo = true; //是否可以购买
	goodsInfo.repertoryAmount = null; //所有库存
	goodsInfo.selectShopStr = ""; //选中的规格展示
	goodsInfo.detailRichText = ""; //商品详情富文本编辑的数据
	goodsInfo.purchaseLimitStr = ""; //身份限购弹框展示的内容
	goodsInfo.purchaseUserLevelsStr = ""; //身份限购页面展示的内容
	
	await goodsInfo.getDetail()
	await address.getShippingFee();
	goodsInfo.showPop = false
	nextTick( async()=>{
		await scroll.init()
	})
}
const beginning = ref(false) //false  用户端  true 服务端

//详情数据
const goodsInfo = reactive<any>({
	goodsId:'',//商品id
	data:{},//商品详情
	showPop:false,
	swiperIsVideo:false,  //true 视频  false  图片
	current:0,//轮播图滑块
	
	status: 0, //在线状态 0-预备，1-在售 2-下架
	goodsStatus: 0, //库存状态 0-充裕，1-紧张，2-缺货
	detailRichText:'',//商品详情富文本
	purchaseNo: true, //是否可以购买，用于购买按钮的状态统一判断
	saleTime: "", //即将开售定时器
	condition: 0, //  是否满足限购条件  1 身份限购 2 数量限购
	purchaseLimit: {}, //限购信息
	purchaseLimitStr: "", //弹框可以购买的成员
	purchaseUserLevelsStr: "", //页面可以购买的成员
	tipsmsg: "", //限购数量的提示语
	spotDeliveryMsg: {//几点发货
		str: "",
		num: 0
	},
	skuCode: "", //sku 规格id
	selectShopStr: "", //已选的规格展示
	selectShop: {}, //已选的规格数据
	repertoryAmount: 0, //库存数量
	preSale: true, //判断是现货还是预售   true现货   false预售
	priceMoney: "", //价格
	sku: [], //默认数据 
	cartMessage:{},
	swiperChange:(e)=>{
		goodsInfo.current = e.detail.current
	},
	getDetail: async()=>{
		const res: any = await api({
			method: 'get',
			url: `/mall/shopping/goods/details/${goodsInfo.goodsId}`,
		})
		if(res){
			res.data.num = 1; //设置输入框初始值为1
			goodsInfo.data = res.data;
			goodsInfo.status = res.data.status; //在售状态 0-即将开售，1-在售 2-下架
			goodsInfo.goodsStatus = res.data.goodsStatus; //商品状态  1-在售，2-已抢光 ，3-预售且已抢光，4-预售
			goodsInfo.data.detailPic = res.data.detailPic.split(","); //详情图
			// 商品参数
			if (goodsInfo.data.goodsParameter) {
				goodsInfo.data.goodsParameters = JSON.parse(goodsInfo.data.goodsParameter);
			}
			// 商品通用详情
			if (res.data.topTemplateContent) {
				goodsInfo.detailRichText = dealHtml(res.data.topTemplateContent);
			}
			//商品详情
			if (res.data.detailRichText) {
				goodsInfo.detailRichText = dealHtml(res.data.detailRichText);
			}
			// 商品通用详情
			if (res.data.bottomTemplateContent) {
				goodsInfo.detailRichText = dealHtml(res.data.bottomTemplateContent);
			}
			if (res.data.ctgabaCertificate) {
				goodsInfo.detailRichText = dealHtml(res.data.ctgabaCertificate);
			}
			// 顶部tab  判断
			if (goodsInfo.data.goodsParameter != "[]" || goodsInfo.detailRichText) {
				scroll.tabs.push("详情"); //是否有详情
			}
			if(goodsInfo.status==0){
				goodsInfo.purchaseNo = false;
			}
			// 商品下架或者商品售罄
			if ((goodsInfo.goodsStatus == 3 || goodsInfo.status == 2 || (goodsInfo.goodsStatus == 2 && goodsInfo.data.saleType == 1)) && goodsInfo.status != 0) {
				goodsInfo.purchaseNo = false;
				recommend.getSellOut();
				recommend.noGoods = recommend.sellOutList.length == 0 ? false : true;
			}
			// 即将开售 判断时间是否过期
			if (res.data.saleTime) {
				const saleTime = res.data.saleTime.replace(/\-/g, "/");
				//时间判断
				const endTime = new Date(saleTime).getTime();
				const curTime = new Date().getTime();
				if (endTime < curTime) {
					res.data.saleTime = null;
				}
				//即将开售定时器
				if (goodsInfo.status == 0 && res.data.saleTime) {
					common.oneBuyPromotionVOStatusTimes(res.data.saleTime);
				}
			}
			
			// 数量限购
			if (res.data.purchaseLimitType != 0) {
				let num = null,day=''
				if (res.data.purchaseLimitType == 1) {
					let arrNum = res.data.purchaseLimitRules.split(",");
					num = res.data.purchaseLimitType == "1" ? arrNum[1] : res.data.purchaseLimitRules;
					if (res.data.purchaseLimitType == 1) {
						day = arrNum[0] < 7 ? "每天" : arrNum[0] == 7 ? "每周" : arrNum[0] <= 31 ? "每月" : "每年";
					} else {
						day = "";
					}
				} else if (res.data.purchaseLimitType == 2) {
					day = "永久";
					num = res.data.purchaseLimitRules;
				}
				if (Number(num) <= res.data.alreadyBuyNum) {
					goodsInfo.condition = 2;
					res.data.isBuy = true;
					goodsInfo.purchaseNo = false;
					goodsInfo.tipsmsg = `当前商品${day}限购${num}件<br>您已购${num}件，已无法再购买`;
				}
				goodsInfo.purchaseLimit.num = num;
				goodsInfo.purchaseLimit.day = day;
			}
			//限购人员  什么身份可以购买  判断是否属于限购
			if (!res.data.purchaseUserLevelsStr && res.data.purchaseUserLimit == 1) {
				res.data.purchaseUserLimit == 0;
			}
			if (res.data.purchaseUserLimit == 1) {
				// 身份限购
				if(res.data.purchaseUserLevels.indexOf(userInfo.value.identity)==-1){
					goodsInfo.condition = 1;
					goodsInfo.purchaseNo = false;
					goodsInfo.purchaseUserLevelsStr = res.data.purchaseUserLevelsStr.replace(/\,/g,'、')
				}
			}
			// 默认运费
			if (goodsInfo.data.spotDeliveryMsg) {
				let spotDeliveryMsg = goodsInfo.data.spotDeliveryMsg.split(",");
				goodsInfo.spotDeliveryMsg.str = spotDeliveryMsg[0];
				if (spotDeliveryMsg.length == 2) {
					goodsInfo.spotDeliveryMsg.num = spotDeliveryMsg[1];
				}
			}
			//规格 库存
			res.data.goodsSkuStockList.forEach((item) => {
				if (goodsInfo.data.saleType == 1) {
					item.prepareStocks = 0;
				} else if (goodsInfo.data.saleType == 3) {
					item.stocks = 0;
				}
				goodsInfo.repertoryAmount += item.stocks + item.prepareStocks;
			}); //库存数量  默认第一条规格的 预售和现货的和
			// 默认选择第一个有库存的
			if (goodsInfo.data.ifSkus == 1) {
				if (goodsInfo.repertoryAmount > 0) {
					let item:any = {};
					item = goodsInfo.data.goodsSkuStockList.find((item) => {
						return item.stocks + item.prepareStocks > 0;
					});
			
					goodsInfo.skuCode = item.id;
					let properties = JSON.parse(item.properties);
					goodsInfo.preSale = item.stocks ? true : false;
					goodsInfo.priceMoney = item.price
					properties.forEach((num) => {
						goodsInfo.sku.push(num.value);
					});
					goodsInfo.selectShop = item
				} else {
					let properties = JSON.parse(goodsInfo.data.goodsSkuStockList[0].properties);
					goodsInfo.skuCode = goodsInfo.data.goodsSkuStockList[0].id;
					goodsInfo.priceMoney = goodsInfo.data.goodsSkuStockList[0].price
					goodsInfo.selectShop = goodsInfo.data.goodsSkuStockList[0]
					properties.forEach((num) => {
						goodsInfo.sku.push(num.value);
					});
					goodsInfo.preSale = true;
				}
				goodsInfo.selectShopStr = goodsInfo.sku.join(" ; ");
				
				//页面展示
				goodsInfo.data.goodsSkuStockList.forEach(i=>{
					i.propertiesss = JSON.parse(i.properties)
					i.propertiesArr = []
					i.propertiesss.forEach(num => {
						i.propertiesArr.push(num.value)
					})
					i.propertiesArrStr = i.propertiesArr.join('')
				})
				
			} else {
				goodsInfo.skuCode = goodsInfo.data.goodsSkuStockList[0].id;
				goodsInfo.priceMoney = goodsInfo.data.goodsSkuStockList[0].price
				goodsInfo.preSale = goodsInfo.data.goodsSkuStockList[0].stocks || goodsInfo.repertoryAmount == 0 ? true : false;
				goodsInfo.selectShopStr = "已选：默认规格";
				goodsInfo.selectShop = goodsInfo.data.goodsSkuStockList[0]
			}
			recommend.getList(); //获取底部推荐商品
			if (goodsInfo.data.goodsPropertiesValue) {
				goodsInfo.data.goodsPropertiesValue =goodsInfo.data.goodsPropertiesValue.split(",");
				goodsInfo.data.goodsPropertiesValueArr = Array.from(new Set(goodsInfo.data.goodsPropertiesValue));
			}
			nextTick(() => {
				goodsInfo.cartMessage = goodsInfo.data;
				uni.hideLoading()
			});
		}
	},
	toShop: async()=>{
		uni.navigateTo({
			url:'/pages/shopping/shop/index?brands='+ goodsInfo.data.brandsId
		})
	},
	// 接受选择的规格
	getSelectShop:async(e:any, showPop?:Boolean)=> {
		goodsInfo.showPop = false;
		if (showPop) {
			goodsInfo.selectShop = e;
			goodsInfo.sku = e.sku_name_arr;
			goodsInfo.skuCode = goodsInfo.selectShop.id;
			goodsInfo.selectShopStr = "已选: " + goodsInfo.selectShop.selectShopStr;
			goodsInfo.priceMoney = goodsInfo.selectShop.price;
			goodsInfo.repertoryAmount = e.stocks + e.prepareStocks; //库存数量
		
			goodsInfo.preSale = goodsInfo.selectShop.stocks ? true : false;
		}
	},
	//购买弹框
	btnCartMessage:async(num)=> {
		if(!userInfo.value.id){
			uni.showToast({
				title: '请登录',
				icon: 'none'
			})
			return
		}
		// 下架 售罄   没有规格
		if (
			goodsInfo.status == 2 ||
			!goodsInfo.data.goodsSkuStockList ||
			(goodsInfo.data.saleType == 1 && goodsInfo.goodsStatus == 2) ||
			goodsInfo.goodsStatus == 3 ||
			(goodsInfo.data.status == 0 && goodsInfo.data.saleTime)
		)
			return;
	
		// 限购  身份不符合   购买数量超标
		if (goodsInfo.data.isBuy && goodsInfo.condition != 0) {
			if (num == 3) return;
			if (goodsInfo.condition == 1) {
				goodsInfo.noPurchaseShow = true;
			} else {
				goodsInfo.showbtips = true;
			}
			uni.showModal({
				title: '非常抱歉，您暂不符合购买条件',
				content: goodsInfo.condition==1?`该商品仅限${goodsInfo.data.purchaseUserLevelsStr}购买`:goodsInfo.tipsmsg,
			});
			return;
		}
		if (goodsInfo.purchaseNo) {
			// this.goodsInfo.numberAdd = num;
			// this.cartMessage =JSON.parse(JSON.stringify(this.goodsInfo));
			goodsInfo.cartMessage.numberAdd = num;
			goodsInfo.cartMessage.address = address.data
			goodsInfo.cartMessage.preSale = goodsInfo.preSale
			goodsInfo.cartMessage.hideTemporarySave = goodsInfo.hideTemporarySave;
			goodsInfo.cartMessage.remarks = goodsInfo.remarks;
			goodsInfo.cartMessage.sku = goodsInfo.sku
			goodsInfo.showPop = true;
		}
	},
	//选择规格默认 sku组件 开始-
	onOpenSkuPopup:()=> {
		skuPopup.value.details.selectSku({
			sku: goodsInfo.sku,
			num: 1
		});
	},
	toCar:()=>{
		uni.navigateTo({
			url:'/pages/shopping/cart/index'
		})
	},
	onlineMall:()=>{
		if(beginning.value){
			uni.navigateBack()
		}else{
			uni.switchTab({
				url:'/pages/onlineMall/index'
			})
		}
	},
	toUrl:(index)=>{
		uni.switchTab({
			url:model.navList[index].url
		})
	},
	toShare:()=>{
		uni.navigateTo({
			url: `/pages/share/workCode/index?type=6&id=${goodsInfo.goodsId}`
		});
	},
	toUserShop:()=>{
		uni.showModal({
			title: '温馨提示',
			content: '下单请前往用户端下单',
			confirmText:'前往用户端',
			showCancel:false,
			success: async (res) => {
			    uni.navigateTo({
			    	url:'/pages/shopping/userorDeringGuide/index'
			    })	 
			}
		});
	}
})

//地址
const address = reactive<any>({
	isGetAddress: true, //判断是否可以请求 地址
	expressDetail:{},//快递说明
	logistics:{},
	data:{city:'',area:'',province:''},
	selectAddress:()=>{//跳转选择地址
		if (!userInfo.value) {
			//未登录用户弹出提示框
			uni.showToast({
				title: '请登录',
				icon: 'none'
			})
		} else {
			address.isGetAddress = false;
			uni.navigateTo({
				url:'/pages/addressManagement/addressList/index?select=true'
			})
		}
	},
	//获取运费
	getShippingFee: async()=> {
		if (JSON.stringify(addressInfo.value) != "{}") {
			address.data = addressInfo.value
		} else {
			address.data.province = "湖北省"
			address.data.city = "武汉市"
		}
		if (address.data) {
			const res1: any = await api({
				method: 'get',
				url: `/mall/shopping/goods/goods_logistics`,
				data:{
					goodsId: goodsInfo.goodsId,
					province: address.data.province,
					city: address.data.city
				}
			})
			if(res1){
				address.logistics = res1.data;
			}
			//获取运输信息
			const res: any = await api({
				method: 'get',
				url: `/mall/shopping/goods/goods_detail_freight`,
				data:{
					goodsId: goodsInfo.goodsId,
					province: address.data.province,
					city: address.data.city
				}
			})
			address.expressDetail = res.data;
			if (address.expressDetail.freeType == 1) {
				address.expressDetail.money = goodsInfo.data.price >= address.expressDetail.freeMoney ? false : true;
			} else {
				address.expressDetail.money = address.expressDetail.freeAmount
			}
			if (address.expressDetail.continuousFreight == "0.00") {
				address.expressDetail.continuousFreight = null;
			}
		}
		address.isGetAddress = true;
	}
})


// 推荐商品
const recommend = reactive({
	list:[],//底部推荐商品
	sellOutList:[],//售罄 推荐商品
	noGoods: false, //商品下架 或者售罄弹框
	getSellOut: async()=>{//获取售罄 推荐商品
		const res: any = await api({
			method: 'get',
			url: `/mall/shopping/goods/search/brandOnShelve`,
			data:{brandId:goodsInfo.data.brandId}
		})
		recommend.sellOutList = res.data.records
		if(recommend.sellOutList.length!=0){
			recommend.openRecommendModel()
		}
	},
	getList: async()=>{//获取推荐商品
		const res: any = await api({
			method: 'get',
			url: `/mall/shopping/goods/goods_detail_recommend/${goodsInfo.goodsId}`,
		})
		if(res){
			recommend.list = res.data
			scroll.tabs.push("推荐");
			scroll.tabs.push("更多");
		}
	},
	openRecommendModel:()=>{
		recommendModel.value.open('bottom')
	},
	closerecommendModel:()=>{
		recommendModel.value.close()
	},
	btnDetail:(id)=>{
		recommendModel.value.close()
		goodsInfo.goodsId = id
		init()
	}
})


//滚动
const scroll = reactive({
	clickToId:'',//节点id
	allArr:[],//列表数据
	navIndex: 0,//当前导航条高亮滑块
	can: true, //锚点
	opacity: 0, //淡入淡出参数
	scrollTop: 0, //页面滚动高度
	fixedPage: false, //是否禁止滚动页面
	// 锚点 名称  分类
	tabs: ['概况'],
	centerArr:[],//页面中每个节点的高度
	init:async()=>{
		let lens = 0
		scroll.tabs.forEach( async(item, index) => {
			let res2:any = await scroll.computedSwiperHeight('#p' + (Number(index)+1));
			if(res2&&res2.height){
				lens += res2.height
				scroll.centerArr.push(lens)
			}
		})
	},
	scrollSun:async(e)=>{//滚动事件
		scroll.opacity = e.detail.scrollTop / 80;
		scroll.clickToId = '';
		let scrollTop = e.target.scrollTop;
		let len = scroll.centerArr.length;
		for (let i = 0; i < len; i++) {
			let h1 = scroll.centerArr[i];
			let h2 = scroll.centerArr[i - 1] == undefined ? 0 : scroll.centerArr[i - 1];
			if (scrollTop >= h2 && scrollTop < h1) {
				scroll.navIndex = i;
				
			}
		}
	},
	//锚点导航 高亮位置改变
	tabChange1:(index:number)=> {
		if(index==(scroll.tabs.length-1)){
			model.navModel = true
		}else{
			if (!scroll.opacity) return
			scroll.clickToId = 'p' + (index+1);
			scroll.navIndex = index;
		}
		
	},
	// 商品列表高度计算
	computedSwiperHeight : async (selectQuery:string) => {
		return new Promise((resolve, reject) => {
			nextTick(() => {
				// #ifdef MP-WEIXIN
				const query = wx.createSelectorQuery()
				// #endif
				query.select(selectQuery).boundingClientRect()
				query.selectViewport().scrollOffset()
				query.exec((res) => {
					resolve(res[0])
				})
			})
		});
		
	},
})

// 公共js  定时器
const common = reactive({
	//定时器  即将开售
	oneBuyPromotionVOStatusTimes:(endTime:any) => {
		endTime = endTime.replace(/\-/g, "/");
		if (new Date(endTime).getTime() <= new Date().getTime()) {
			return;
		}
		setTimeout(() => {
			var result = formatTime().timeDifference(new Date(), endTime);
			if (result <= 0) {
				goodsInfo.getDetail()
			} else {
				goodsInfo.saleTime = result;
				common.oneBuyPromotionVOStatusTimes(endTime);
			}
		}, 1000);
	},
	getPresalesDelivery:()=>{
		if(goodsInfo.preSale){
			return `现货，${goodsInfo.data.spotDeliveryMsg ? goodsInfo.spotDeliveryMsg.str : 15}点前下单当天发货，${goodsInfo.data.spotDeliveryMsg ? goodsInfo.spotDeliveryMsg.str : 15}点后的订单次日发货${goodsInfo.data.spotDeliveryMsg && goodsInfo.spotDeliveryMsg.num == 1 ? ",周末及法定节假日顺延" : ""}`;
		}else{//预售
			if(goodsInfo.data.prepareDeliveryTime){
				let prepareDeliveryTime = goodsInfo.data.prepareDeliveryTime.split(',')
				let num = prepareDeliveryTime[prepareDeliveryTime.length-1]
				return  `${goodsInfo.data.prepareDeliveryTime.split("-")[1]}月${num==1?'上':num==2?'中':'下'}旬发货`
			}else{
				return /^(\d{4})-(\d{2})-(\d{2})$/.test(goodsInfo.data.deliveryMsg) ? goodsInfo.data.deliveryMsg + "开始发货" : goodsInfo.data.deliveryMsg
			}
		}
	}
})

//弹框
const model = reactive({
	navModel:false,//头部nav 弹框
	navList:[
		{img:url.value+'icon-181.png',name:'商城首页',url:'/pages/onlineMall/index',id:1},
		{img:url.value+'icon-183.png',name:'个人中心',url:'/pages/user/index',id:2},
		{img:url.value+'icon-186.png',name:'消息中心',url:'/pages/message/index',id:3}
	]
})


	
</script>

<style lang="scss" scoped>
.container{
	width: 100%;
	line-height: 1;
	min-height: 100%;
	background-color: #F9F6F6;
	// padding-bottom: calc(var(--safe-area-bottom) + 128rpx);
	.scrollView{
		height: calc(100vh - var(--safe-area-bottom) - 88rpx);
		/* #ifdef MP-WEIXIN */
		height: calc(100vh - var(--safe-area-bottom) - 88rpx);
		/* #endif */
		// padding-bottom: 60rpx;
	}
}
.container1{
	.scrollView{
		height: calc(100vh - var(--safe-area-bottom) - 240rpx);
		/* #ifdef MP-WEIXIN */
		height: calc(100vh - var(--safe-area-bottom) - 150rpx);
		/* #endif */
		padding-bottom: 60rpx;
	}
}

.header{
	width: 100%;
	height: 750rpx;
	position: relative;
	swiper,image,video{
		width: 100%;
		height: 750rpx;
	}
	.dian{
		width: 100vw;
		position: absolute;
		height: 52rpx;
		left: 0;bottom: -24rpx;
		@include flex(flex-start,center);
		view{
			width: 8rpx;
			height: 8rpx;
			background: #CCCCCC;
			border-radius: 50%px;
			margin-right: 4rpx;
			&:last-child{
				margin: 0;
			}
		}
		.active{
			width: 32rpx;
			background: #FFFFFF;
			border-radius: 200rpx;
		}
	}
	.changeVideo{
		width: 192rpx;
		height: 58rpx;
		font-size: 26rpx;
		color: #CACCCC;
		position: absolute;
		right: 50%;
		bottom: 60rpx;
		margin-right: -128rpx;
		padding: 0 32rpx;
		background: rgba(0,0,0,0.35);
		border-radius: 50rpx;
		@include flex(center,space-between);   
		.active{
			color:#fff;
		}
	}
}
.main{
	width: 100%;
	box-sizing: border-box;
	padding: 32rpx 32rpx 0;
	box-sizing: border-box;
	.detail{
		width: 100%;
		.priceStatus{
			width: 100%;
			background: #FDE8EC;
			padding:32rpx 32rpx 48rpx;
			box-sizing: border-box;
			border-radius: 24rpx 24rpx 0px 0px;
			@include flex(center,space-between);
			.price{
				font-weight: bold;
				font-size: 26rpx;
				color: #FF6084;
				text{font-size: 36rpx;}
			}
			.status{
				padding: 8rpx 16rpx;
				font-size: 24rpx;
				color: #6363FF;
				border-radius: 50rpx;
				border: 2rpx solid #6363FF;
			}
		}
		.detail_content{
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-top: -16rpx;
			padding: 32rpx;
			box-sizing: border-box;
			.detail_content_top{
				margin-bottom: 20rpx;
				@include flex(center,space-between);
			}
			.name{
				width: 504rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #1A1A1A;
				line-height: 40rpx;
			}
			.label{
				width: 100%;
				font-size: 26rpx;
				line-height: 36rpx;
				color: #7C807F;
			}
			.share{
				@include flex(center);
				>text{
					width: 2rpx;
					height: 40rpx;
					display: inline-block;
					background: #E4E6E6;
					margin-right: 36rpx;
				}
				view{
					font-size: 13px;
					color: #1B2120;
					@include flex(center);
					flex-direction: column;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 4rpx;
					}
				}
			}
		}
	}
	.configuration{
		margin-top: 32rpx;
		.item{
			margin-bottom: 48rpx;
			@include flex(flex-start);
			&:last-child{
				margin: 0;
			}
			.label{
				width: 84rpx;
				color: #7C807F;
				font-size: 26rpx;
			}
			.value{
				width: calc(100% - 84rpx);
				@include flex(flex-start,space-between);
				.item_content{
					width: 480rpx;
					color: #1B2120;
					font-size: 30rpx;
					.shippingFee{
						color: #7C807F;
						font-size: 26rpx;
						margin-top: 24rpx;
					}
					.address{
						color: #1B2120;
						font-size: 26rpx;
						margin-top: 24rpx;
						line-height: 40rpx;
						text{
							color: #7C807F;
							position: relative;
							margin-left: 34rpx;
						}
						text::after{
							content:'';
							position: absolute;
							width: 2rpx;
							height: 20rpx;
							background: #E4E6E6;
							left: -12rpx;
							top: 10rpx;
						}
					}
				    .select_scroll{
						width: 100%;
						margin-top: 24rpx;
						position: relative;
						padding-right: 60rpx;
						box-sizing: border-box;
						.scroll-x {
							white-space: nowrap;
						}
						.select_label{
							color: #7C807F;
							height: 90rpx;
							display: inline-block;
							font-size: 26rpx;
							padding: 0 16rpx;
							line-height: 90rpx;
							background: #FFFFFF;
							border-radius: 12rpx;
							margin-right: 8rpx;
							min-width: 136rpx;
							max-width: 216rpx;
							text-align: center;
							box-sizing: border-box;
							border: 2rpx solid #CACCCC;
						}
						.active{
							color: #1B2120;
							border-color: #FF6084;
						}
						.total{
							width: 136rpx;
							height: 90rpx;
							font-size: 26rpx;
							color: #7C807F;
							text-align: center;
							line-height: 40rpx;
							background: #F9F6F6;
							border-radius: 12rpx;
							@include flex(center,center);
							flex-direction: column;
							position: absolute;
							top: 0;right: -66rpx;
						}
				    }
				}
				
			}
		}
	}
	.activity{
		@include flex(flex-start,space-between);
		.label{
			width: 84rpx;
			color: #7C807F;
			margin-top: 4rpx;
			font-size: 26rpx;
		}
		.value{
			width: calc(100% - 84rpx);
			.activity_item{
				
				@include flex(center,space-between);
				.item_content{
					font-size: 30rpx;
					color: #1B2120;
					@include flex(center);
					view{
						width: 72rpx;
						height: 40rpx;
						font-size: 24rpx;
						color: #FF6084;
						margin-right: 8rpx;
						background: #FFFFFF;
						border-radius: 200rpx;
						border: 2rpx solid #FF6084;
						@include flex(center,center);
					}
				}
			}
			.last{
				margin-top: 24rpx;
			}
		}
	}
	.shop{
		@include flex(center);
		margin-bottom: 48rpx;
		image{
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx;
			margin-right: 16rpx;
		}
		.shop_centent{
			width: calc(100% - 136rpx);
			.name{
				width: 100%;
				font-weight: bold;
				font-size: 36rpx;
				color: #1A1A1A;
				line-height: 32rpx;
				@include flex(center,space-between);
				.brandsName{
					width: 350rpx;
					line-height: 46rpx;
				}
				view:last-child{
					font-size: 24rpx;
					color: #5C5E5E;
					font-weight: normal;
					@include flex(flex-start);
				}
			}
			.jianjie{
				width: 100%;
				font-size: 26rpx;
				color: #808080;
				margin-top: 24rpx;
			}
		}
	}
	.view{
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin-top: 24rpx;
	}
    
}
.detail_content{
	margin-top: 48rpx;
	.detail_content_title{
		padding-left: 32rpx;
		margin-bottom: 24rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #1A1A1A;
	}
	.mainInfo-area {
		padding:0 32rpx;
		box-sizing: border-box;
		word-break: break-all;
	}
		
	.mainInfo-area>p {
		color: red;
	}
		
}
.recommend{
	padding:0 32rpx 80rpx 32rpx;
	box-sizing: border-box; 
	margin-top: 48rpx;
	.recommend_title{
		margin-bottom: 32rpx;
		text-align: center;
		font-weight: bold;
		font-size: 40rpx;
		color: #1B2120;
	}
}
.tipsFooter{
	width: 100vw;
	position: fixed;
	bottom: -4rpx;
	left: 0;
	font-size: 26rpx;
	color: #5C5E5E;
	padding: 24rpx 0 24rpx 40rpx;
	box-sizing: border-box;
	background: #E4E6E6;
	@include flex(center);
	bottom: calc(var(--safe-area-bottom) + 104rpx);
}
.footer{
	position: fixed;
	bottom: 0;
	left: 0;z-index: 9 !important;
	width: 100vw;
	padding: 8rpx 40rpx;
	border-top: 1rpx solid #E4E6E6;
	padding-bottom: calc(var(--safe-area-bottom) + 8rpx);
	box-sizing: border-box;
	background-color: #ffffff;
	@include flex(center, space-between);
	.toUrl{
		@include flex(center);
		view{
			font-size: 24rpx;
			color: #1A1A1A;
			@include flex(center,center);
			flex-direction: column;
			margin-right: 40rpx;
			&:last-child{margin: 0;}
			image{
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 16rpx;
			}
		}
		
	}
	.toBtn{
		@include flex(center);
		view{
			width: 232rpx;
			height: 88rpx;
			font-size: 28rpx;
			color: #FF6084;
			border-radius: 44rpx;
			border: 2rpx solid #FF6084;
			@include flex(center,center);
			box-sizing: border-box;
			&:last-child{
				color: #fff;
				margin-left: 8rpx;
				background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
			}
		}
	}
	.purchaseNo view{
		color: #E4E6E6;
		border: 2rpx solid #E4E6E6;
		&:last-child{
			background:#E4E6E6;
		}
	}
}
.footerProd{
	padding: 24rpx 0 8rpx;
	flex-direction: column;
	.fenYong{
		width: 100%;
		margin-bottom: 24rpx;
		padding: 0 22rpx 0 32rpx;
		box-sizing: border-box;
		@include flex(center,space-between);
		view{
			width: 340rpx;
			height: 72rpx;
			color: #5C5E5E;
			font-size: 24rpx;
			background: #FFE6EC;
			border-radius: 12rpx;
			@include flex(center,center);
			&:last-child{
				background: #F1EEFF;
			}
		}
	}
	.toShare{
		width: 100%;
		padding: 0 40rpx;
		box-sizing: border-box;
		@include flex(center,space-between);
		.to{
			font-size: 24rpx;
			color: #1A1A1A;
			@include flex(center,center);
			flex-direction: column;
			margin-right: 40rpx;
			&:last-child{margin: 0;}
			image{
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 16rpx;
			}
		}
		.share{
			color: #FFFFFF;
			width: 576rpx;
			height: 88rpx;
			font-size: 28rpx;
			border-radius: 62rpx;
			@include flex(center,center);
			background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
		}
	}
}
.navModel{
	position: fixed;
	left: 0;top: 88rpx;
	width: 100vw;
	height: 100vh;
	background: rgba(0,0,0,0.4);
	.content{
		width: 100%;
		padding:64rpx 32rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		@include flex(center,space-between);
		.content_item{
			width: 160rpx;
			height: 120rpx;
			color: #1A1A1A;
			font-size: 24rpx;
			background: #F9F6F6;
			border-radius: 24rpx;
			@include flex(center,center);
			flex-direction: column;
			image{
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 8rpx;
			}
		}
	}
}
.comment{
	width: 100%;
	height: 88rpx;
	position: fixed;
	z-index: 9 !important;
	left: 0;
	top: 0;
	padding: 0 72rpx;
	@include flex(center,space-between);
	box-sizing: border-box;
	background-color: #FFFFFF;
	border-top: 2rpx solid #E7E9E9;
	view{
		height: 100%;
		font-size: 28rpx;
		color: #5C5E5E;
		line-height: 88rpx;
		position: relative;
		text{
			position: absolute;
			width: 32rpx;
			height: 8rpx;
			background: #FF6084;
			border-radius: 4rpx;
			bottom: 0;
			left: 50%;
			margin-left: -16rpx;
			display: none;
		}
	}
	.active{
		font-weight: bold;
		font-size: 32rpx;
		color: #1B2120;
		text{display: block;}
	}
}
.conditionDialogpopup{
	width: 100vw;
	box-sizing: border-box;
	background-color: #ffffff;
	padding: 0 0 calc(32rpx + var(--safe-area-bottom));
	overflow: hidden;
	max-height: 100vh;
	border-radius: 24rpx 24rpx 0 0;
	box-sizing: border-box;
	position: relative;
	.shopClass_list {
		padding: 0;
	}
	.selectlandnotice{
		position: relative;
		color: #1b2120;
		font-size: 28rpx;
		box-sizing: border-box;
		padding: 32rpx 40rpx;
		@include flex(center,space-between);
	}
	.scroll-x {
		white-space: nowrap;
	}
	.shopClass_list {
		padding-left: 40rpx;
		box-sizing: border-box;
		width: 100%;
		position: relative;
		.shopClass_list_item {
			width: 194rpx;
			display: inline-block;
			margin-right: 24rpx;
	
			&:last-child {
				padding-right: 72rpx;
				margin-right: 0;
			}
	
			image {
				width: 194rpx;
				height: 194rpx;
				display: block;
				border-radius: 12rpx;
			}
	
			.h5 {
				width: 100%;
				color: #1b2120;
				font-size: 24rpx;
				font-weight: 500;
				margin: 8rpx 0 20rpx
			}
	
			.shopClass_list_item_money {
				color: #FD5454;
				font-size: 24rpx;
				font-weight: bold;
				width: 100%;
			}
		}
	
		.seeMore {
			position: absolute;
			right: 0;
			top: 0;
			width: 48rpx;
			height: 100%;
			background: #FFFFFF;
			border-radius: 6px 0px 0px 6px;
			border: 1px solid #EEEEEE;
			display: flex;
			align-items: center;
			color: #7c807f;
			font-size: 24rpx;
			flex-direction: column;
			justify-content: center;
	
			text {
				width: 20rpx;
			}
	
			image {
				width: 20rpx;
				height: 20rpx;
				margin-top: 8rpx;
				transform: rotate(180deg);
			}
		}
	}
}
</style>
